---
title: Créer des sites Astro avec des outils d'IA
sidebar:
  label: Créer avec l'IA
tableOfContents:
  minHeadingLevel: 2
  maxHeadingLevel: 4
i18nReady: true
description: Ressources et conseils pour créer des sites Astro avec l'aide de l'IA
---

import { Steps, LinkButton, Card, Tabs, TabItem } from '@astrojs/starlight/components';

Les éditeurs basés sur l'IA et les outils de codage agentique ont généralement une bonne connaissance des API et des concepts de base d'Astro. Cependant, certains peuvent utiliser des API plus anciennes et ne pas être au courant des nouvelles fonctionnalités ou des modifications récentes apportées au framework.

Ce guide explique comment améliorer les outils d'IA avec des connaissances d'Astro à jour et fournit les meilleures pratiques pour créer des sites Astro avec l'assistance de l'IA.

## Fichiers de contexte

Astro fournit des fichiers [`llms.txt`](https://docs.astro.build/llms.txt) et [`llms-full.txt`](https://docs.astro.build/llms-full.txt) qui contiennent le contenu complet de la documentation dans un format optimisé pour la consommation par l'IA. Il s'agit de fichiers statiques du contenu d'Astro Docs dans un format Markdown simplifié. Certains outils d'IA peuvent détecter automatiquement ces fichiers si vous indiquez `https://docs.astro.build` comme source pour la documentation.

Bien que ces fichiers fournissent une version minimale et facile à analyser de la documentation d'Astro, ce sont des fichiers volumineux qui utiliseront beaucoup de jetons s'ils sont utilisés directement dans le contexte et devront être mis à jour régulièrement pour rester à jour. Il est préférable de les utiliser comme solution de secours lorsque l’outil d’IA n’a pas accès à la documentation la plus récente par d’autres moyens. [Le serveur MCP](#serveur-mcp-dastro-docs) offre un accès plus efficace à la documentation complète avec des capacités de recherche en temps réel, ce qui en fait l'option préférée lorsqu'elle est disponible.

## Serveur MCP d'Astro Docs

Vous pouvez vous assurer que vos outils d'IA disposent de connaissances d'Astro à jour grâce au serveur MCP (« Model Context Protocol » en anglais) d'Astro Docs. Celui-ci permet un accès en temps réel à la documentation la plus récente, aidant les outils d'IA à éviter les recommandations obsolètes et garantissant qu'ils comprennent les meilleures pratiques actuelles.

:::tip[Qu'est-ce que le MCP ?]
Le [protocole de contexte de modèle](https://modelcontextprotocol.io/) (ou « Model Context Protocol », abrégé MCP, en anglais) est un moyen standardisé permettant aux outils d'IA d'accéder à des outils externes et à des sources de données.
:::

Contrairement aux modèles d'IA entraînés sur des données statiques, le serveur MCP donne accès à la documentation d'Astro la plus récente. Le serveur est gratuit, open source et fonctionne à distance sans aucune installation locale.

Le serveur MCP d'Astro Docs utilise l'API de [kapa.ai](https://www.kapa.ai/) pour maintenir un index à jour de la documentation d'Astro.

### Détails du serveur

- **Nom** : Astro Docs
- **URL** : `https://mcp.docs.astro.build/mcp`
- **Transport** : HTTP diffusable en continu

### Installation

Le processus de configuration varie en fonction de votre outil de développement d’IA. Certains outils peuvent désigner les serveurs MCP par des termes tels que connecteurs, adaptateurs, extensions ou modules d'extension.

#### Configuration manuelle

De nombreux outils prennent en charge un format de configuration JSON commun pour les serveurs MCP. Si votre outil ne dispose pas d'instructions spécifiques, vous pouvez peut-être ajouter le serveur MCP d'Astro Docs en incluant la configuration suivante dans les paramètres MCP de votre outil :

<Tabs>
  <TabItem label="Streamable HTTP">
    ```json title="mcp.json" {3-6}
    {
      "mcpServers": {
        "Astro docs": {
          "type": "http",
          "url": "https://mcp.docs.astro.build/mcp"
        }
      }
    }
    ```
  </TabItem>
  <TabItem label="Local Proxy">
    ```json title="mcp.json" {3-7}
    {
      "mcpServers": {
        "Astro docs": {
          "type": "stdio",
          "command": "npx",
          "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
        }
      }
    }
    ```
  </TabItem>
</Tabs>

#### CLI de Claude Code

[Claude Code](https://docs.anthropic.com/fr/docs/claude-code/overview) est un outil de codage agentique qui s'exécute sur la ligne de commande. L'activation du serveur MCP d'Astro Docs lui permet d'accéder à la documentation la plus récente lors de la génération de code Astro.

Installation à l'aide de la commande du terminal :

```shell
claude mcp add --transport http astro-docs https://mcp.docs.astro.build/mcp
```

[Plus d'informations sur l'utilisation des serveurs MCP avec Claude Code](https://docs.anthropic.com/fr/docs/claude-code/mcp)

#### GitHub Action pour Claude Code

Claude Code fournit également une action GitHub qui peut être utilisée pour exécuter des commandes en réponse à des événements GitHub. L'activation du serveur MCP d'Astro Docs lui permet d'accéder à la documentation la plus récente tout en répondant aux questions dans les commentaires ou en générant du code Astro.

Vous pouvez le configurer pour utiliser le serveur MCP d'Astro Docs pour accéder à la documentation en ajoutant ce qui suit au fichier de workflow :

```yaml title=".github/workflows/claude.yml" {5-14}
# ...le reste de la configuration de votre flux de travail
- uses: anthropics/claude-code-action@beta
  with:
    anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
    mcp_config: |
      {
        "mcpServers": {
          "astro-docs": {
            "type": "http",
            "url": "https://mcp.docs.astro.build/mcp"
          }
        }
      }
    allowed_tools: "mcp__astro-docs__search_astro_docs" 
```

[Plus d'informations sur l'utilisation des serveurs MCP avec l'action GitHub Claude Code](https://github.com/anthropics/claude-code-action?tab=readme-ov-file#using-custom-mcp-configuration)

#### Cursor

[Cursor](https://cursor.com) est un éditeur de code avec IA. L'ajout du serveur MCP d'Astro Docs permet à Cursor d'accéder à la documentation d'Astro la plus récente tout en effectuant des tâches de développement.

Installation en cliquant sur le bouton ci-dessous :

<LinkButton href="cursor://anysphere.cursor-deeplink/mcp/install?name=Astro%20docs&config=eyJ1cmwiOiJodHRwczovL21jcC5kb2NzLmFzdHJvLmJ1aWxkL21jcCJ9">Ajoutez à Cursor</LinkButton>

[Plus d'informations sur l'utilisation des serveurs MCP avec Cursor](https://docs.cursor.com/context/mcp)

#### Visual Studio Code

[Visual Studio Code](https://code.visualstudio.com) prend en charge les serveurs MCP lors de l'utilisation de Copilot Chat. L'ajout du serveur MCP d'Astro Docs permet à VS Code d'accéder à la dernière documentation d'Astro pour répondre à des questions ou effectuer des tâches de codage.

Installation en cliquant sur le bouton ci-dessous :

<LinkButton href="vscode:mcp/install?%7B%22name%22%3A%22Astro%20docs%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.docs.astro.build%2Fmcp%22%7D">Ajoutez à VS Code</LinkButton>

[Plus d'informations sur l'utilisation des serveurs MCP avec VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server)

#### Warp

[Warp](https://warp.dev) (anciennement Warp Terminal) est un environnement de développement d'agents conçu pour coder avec plusieurs agents IA. L'ajout du serveur MCP d'Astro Docs permet à Warp d'accéder à la dernière documentation Astro pour répondre à des questions ou effectuer des tâches de codage.

<Steps>

1. Ouvrez vos paramètres Warp et accédez à AI > MCP Servers > Manage MCP Servers.
2. Cliquez sur « Add ».
3. Saisissez la configuration suivante. Vous pouvez éventuellement configurer le serveur MCP d'Astro pour qu'il s'active au démarrage à l'aide de l'option `start_on_launch` :
   ```json title="Configuration MCP" {3-9}
   {
     "mcpServers": {
       "Astro docs": {
         "command": "npx",
         "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"],
         "env": {},
         "working_directory": null,
         "start_on_launch": true
       }
     }
   }
   ```
4. Cliquez sur « Save ».

</Steps>

[Plus d'informations sur l'utilisation des serveurs MCP avec Warp](https://docs.warp.dev/knowledge-and-collaboration/mcp)

#### Claude.ai / Claude Desktop

[Claude.ai](https://claude.ai) est un assistant IA à usage général. L'ajout du serveur MCP d'Astro Docs lui permet d'accéder à la documentation la plus récente pour répondre aux questions à propos d'Astro ou générer du code Astro.

<Steps>

1. Accédez aux [paramètres du connecteur Claude.ai](https://claude.ai/settings/connectors).
2. Cliquez sur « Ajouter un connecteur personnalisé ». Vous devrez peut-être faire défiler la page vers le bas pour trouver cette option.
3. Saisissez l'URL du serveur : `https://mcp.docs.astro.build/mcp`.
4. Définissez le nom sur « Astro docs ».

</Steps>

[Plus d'informations sur l'utilisation des serveurs MCP avec Claude.ai](https://support.anthropic.com/fr/articles/10168395-configuration-des-integrations-sur-claude-ai#h_cda40ecb32)

#### Windsurf

[Windsurf](https://windsurf.com/) est un outil de codage agentique basé sur l'IA, disponible sous forme de modules d'extension d'éditeur ou d'éditeur autonome. Il peut utiliser le serveur MCP d'Astro Docs pour accéder à la documentation tout en effectuant des tâches de codage.

Windsurf ne prend pas en charge le streaming HTTP, il nécessite donc une configuration de proxy locale :

<Steps>

1. Ouvrez `~/.codeium/windsurf/mcp_config.json` dans votre éditeur.
2. Ajoutez la configuration suivante pour les MCP à vos paramètres Windsurf :

   ```json title="Configuration MCP" {3-6}
   {
     "mcpServers": {
       "Astro docs": {
         "command": "npx",
         "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
       }
     }
   }
   ```
3. Enregistrez la configuration et redémarrez Windsurf.

</Steps>

[Plus d'informations sur l'utilisation des serveurs MCP avec Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json)

#### CLI de Gemini

La CLI de Gemini est un outil de codage IA en ligne de commande qui peut utiliser le serveur MCP d'Astro Docs pour accéder à la documentation tout en générant du code Astro.

Vous pouvez configurer les serveurs MCP au niveau global dans le fichier `~/.gemini/settings.json`, ou dans un fichier `.gemini/settings.json` à la racine d'un projet.

```json title=".gemini/settings.json" {3-5}
{
  "mcpServers": {
    "Astro docs": {
      "httpUrl": "https://mcp.docs.astro.build/mcp",
    }
  }
}
``` 

[Plus d'informations sur l'utilisation des serveurs MCP avec la CLI de Gemini](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md)

#### Zed

[Zed](https://zed.dev) prend en charge les serveurs MCP lors de l'utilisation de ses capacités d'IA. Il peut utiliser le serveur MCP d'Astro Docs pour accéder à la documentation tout en effectuant des tâches de codage.

Zed ne prend pas en charge le streaming HTTP, il nécessite donc une configuration de proxy locale :

<Steps>

1. Ouvrez `~/.config/zed/settings.json` dans votre éditeur.
2. Ajoutez la configuration suivante pour les MCP à vos paramètres Zed :

   ```json title="Configuration MCP" {3-6}
   {
     "context_servers": {
       "Astro docs": {
         "command": "npx",
         "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
       }
     }
   }
   ```
3. Enregistrez la configuration.

</Steps>

[Plus d'informations sur l'utilisation des serveurs MCP avec Zed](https://zed.dev/docs/ai/mcp)

#### ChatGPT

:::caution[Disponibilité limitée]
L'intégration du serveur MCP est uniquement disponible pour les utilisateurs de ChatGPT Pro, Team et Enterprise. La configuration est plus complexe que pour d'autres outils.
:::

Reportez-vous à la [documentation du MCP d'OpenAI](https://platform.openai.com/docs/mcp#test-and-connect-your-mcp-server) pour obtenir des instructions de configuration spécifiques.

#### Raycast

[Raycast](https://www.raycast.com/) peut se connecter aux serveurs MCP pour améliorer ses capacités d'IA. Les fonctionnalités d'IA telles que MCP nécessitent un compte [Raycast Pro](https://www.raycast.com/pro), assurez-vous donc d'avoir effectué la mise à niveau avant d'essayer de l'installer. L'ajout du serveur MCP d'Astro Docs permet à Raycast d'accéder à la dernière documentation d'Astro tout en répondant aux questions.

Installation en cliquant sur le bouton ci-dessous :

<LinkButton href="raycast://mcp/install?%7B%22name%22%3A%22Astro%20docs%22%2C%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%20%22mcp-remote%22%2C%20%22https%3A%2F%2Fmcp.docs.astro.build%2Fmcp%22%5D%7D">Ajoutez à Raycast</LinkButton>

[Plus d'informations sur l'utilisation des serveurs MCP avec Raycast](https://manual.raycast.com/model-context-protocol)

#### Opencode AI

[Opencode AI](https://opencode.ai/) est un outil open-source de codage IA en ligne de commande qui peut utiliser le serveur MCP Astro Docs pour accéder à la documentation pendant la génération de code Astro.

Vous pouvez configurer les serveurs MCP dans votre fichier de configuration Opencode, typiquement `opencode.json` placé à la racine de votre projet, ou bien dans votre répertoire de configuration globale (par exemple `~/.config/opencode/opencode.json`).

```json title="Configuration MCP"
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "Astro docs": {
      "type": "remote",
      "url": "https://mcp.docs.astro.build/mcp",
      "enabled": true
    }
  }
}

```

[Plus d'informations sur l'utilisation d'Opencode AI](https://opencode.ai/)

### Utilisation

Une fois configuré, vous pouvez poser des questions à votre outil d'IA à propos d'Astro ; il récupérera les informations directement dans la documentation la plus récente. Les agents de codage pourront consulter la documentation la plus récente lors de l'exécution de tâches de codage, et les chatbots pourront répondre avec précision aux questions sur les fonctionnalités, les API et les meilleures pratiques d'Astro.

:::note[Rappel]
Le serveur MCP d'Astro Docs donne accès à la documentation actuelle, mais vos outils d'IA restent responsables de l'interprétation et de la génération du code. L'IA fait des erreurs ; il est donc important de toujours examiner attentivement le code généré et de le tester minutieusement.
:::

### Dépannage

Si vous rencontrez des problèmes :

- Vérifiez que votre outil prend en charge le transport HTTP diffusable en continu.
- Vérifiez que l'URL du serveur est correcte : `https://mcp.docs.astro.build/mcp`.
- Assurez-vous que votre outil dispose bien d’un accès Internet.
- Consultez la documentation d’intégration MCP de votre outil spécifique.

Si vous rencontrez encore des problèmes, ouvrez un ticket dans le [dépôt du serveur MCP d'Astro Docs](https://github.com/withastro/docs-mcp/issues).


## Assistance IA sur Discord

La même technologie qui alimente le serveur MCP d'Astro est également disponible sous forme de chatbot sur le [Discord d'Astro](https://astro.build/chat) pour une assistance en libre-service. Visitez le canal `#support-ai` pour poser des questions à propos d'Astro ou du code de votre projet en langage naturel. Votre conversation est automatiquement triée par fil et vous pouvez poser un nombre illimité de questions complémentaires.

**Les conversations avec le chatbot sont publiques et sont soumises aux mêmes règles de serveur en matière de langage et de comportement que le reste de nos canaux**, mais elles ne sont pas activement visitées par nos membres bénévoles fournissant une assistance. Pour obtenir l'aide de la communauté, veuillez créer un fil de discussion dans notre canal `#support` habituel.

## Conseils pour le développement avec Astro basé sur l'IA

- **Commencez avec des modèles** : plutôt que de créer à partir de zéro, demandez aux outils d'IA de commencer avec un [modèle Astro](https://astro.build/themes/) existant ou utilisez `npm create astro@latest` avec une option de modèle.
- **Utilisez `astro add` pour les intégrations** : demandez aux outils d'IA d'utiliser `astro add` pour les intégrations officielles (par exemple, `astro add tailwind`, `astro add react`). Pour les autres paquets, installez-les à l'aide de la commande de votre gestionnaire de paquets préféré plutôt que de modifier directement `package.json`.
- **Vérifiez les API actuelles** : les outils d'IA peuvent utiliser des techniques obsolètes. Demandez-leur de consulter la documentation la plus récente, en particulier pour les nouvelles fonctionnalités comme les sessions et les actions. Ceci est également important pour les fonctionnalités qui ont connu des changements importants depuis leur lancement initial, telles que les collections de contenu ou les fonctionnalités auparavant expérimentales qui ne le sont peut-être plus.
- **Utilisez les règles du projet** : si votre outil d’IA le prend en charge, configurez des règles de projet pour appliquer les meilleures pratiques et les normes de codage, telles que celles répertoriées ci-dessus.
